<template>
	<view class="postsList" v-if="props.postData.length>0">
		<PostItem v-for="(item,index) in props.postData" :key="index" :id="item.id" :content='item.content'
			:username='item.username' :likeNum='item.likeNum' :commentNums='item.commentNums'
			:avaterUrl='item.avaterUrl' :statu='item.statu' :date='item.date' :ifMine='props.ifMine'
			:ifAudit='props.ifAudit' />
		<view class="noMore" @click="scrollToTop">
			<van-icon size='50rpx' name="back-top" />
			没有更多了~
		</view>
	</view>
	<view class="noData" v-else>
		<view style="width: 100%;display: flex;justify-content: center;">
			<image class="noDataImg" src="@/static/icons/noDataIcon.svg" mode="aspectFill"></image>
		</view>
		<view>
			暂无数据
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import PostItem from './PostItem.vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	const props = defineProps({
		postData: {
			type: Array,
			default: []
		},
		ifMine: {
			type: Boolean,
			default: false
		},
		ifAudit: {
			type: Boolean,
			default: false
		},
	})
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	}

	// 监听页面滚动到底部
	const onPageBottom = () => {
		console.log('Page1 re232ached');
	};


	onMounted(() => {
		onReachBottom(onPageBottom);
	});
</script>

<style lang="less" scoped>
	.postsList {
		margin-top: 30rpx;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;

		.noMore {
			margin-top: 20rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			align-items: center;
			padding-bottom: 40rpx;
		}
	}

	.noData {
		margin-top: 100rpx;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;

		image {
			height: 500rpx;
			width: 500rpx;
		}

		view {
			text-align: center;
			font-size: 45rpx;
		}
	}
</style>